<template>
  <div class="wrapper">
    <a-card class="card" :bordered="false">
      <div class="title">
        <h3>优蓝外服</h3>/ 2021年6月
      </div>
      <a-divider />
      <div class="show">
        <div v-for="(item, index) of showData" :key="index">
          <a-badge :color="index == 5 ? 'blue': '#b4dafd'" :text="item.title" />
          <p class="num" :class="index == 5 ? 'active' : ''">{{item.num | totalFilter}}</p>
        </div>
      </div>
      <a-divider></a-divider>
      <div class="table_div">
        <div class="btn_div">
          <a-space>
            <a-button type="primary">
              导入
            </a-button>
            <a-button type="primary">
              导出
            </a-button>
            <a-button>
              锁定
            </a-button>
          </a-space>
        </div>
        <div>
          <a-tabs :default-active-key="1" @change="callback">
            <a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.name"></a-tab-pane>
          </a-tabs>

          <Tab1 v-if="currentTabKey === 1" />
          <Tab2 v-if="currentTabKey === 2" />
          <Tab3 v-if="currentTabKey === 3" />
          <Tab4 v-if="currentTabKey === 4" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { splitK } from '@/utils/util'
import Tab1 from './billTabs/tab1'
import Tab2 from './billTabs/tab2'
import Tab3 from './billTabs/tab3'
import Tab4 from './billTabs/tab4'


export default {
  data () {
    return {
      showData: [
        {
          title: '参保人员',
          num: 66
        },
        {
          title: '个人缴费',
          num: 12567.56
        },
        {
          title: '公司缴费',
          num: 12897.56
        },
        {
          title: '个人其他部分',
          num: 12567.56
        },
        {
          title: '公司其他部分',
          num: 0.00
        },
        {
          title: '合计(含服务费，商业险)',
          num: 8888.88
        },
      ],
      currentTabKey: 1,
      tabs: [
        {
          key: 1,
          name: '请款透视'
        },
        {
          key: 2,
          name: '汇缴明细'
        },
        {
          key: 3,
          name: '补缴明细'
        },
        {
          key: 4,
          name: '调基补差明细'
        }
      ],
    }
  },
  components: { Tab1, Tab2, Tab3, Tab4 },
  filters: {
    totalFilter (num) {
      if (num) {
        return splitK(num)
      }
    }
  },
  methods: {
    callback (key) {
      this.currentTabKey = Number(key)
    },
  }
}
</script>

<style lang="less" scoped>
.dspflex {
  display: flex;
  display: -webkit-flex;
}

.active {
  color: #3370ff;
}

.card {
  /deep/.ant-card-body {
    // padding: 0;
  }
}

.title {
  .dspflex();
  & > h3 {
    margin: 0 10px 0 0;
  }
  align-items: center;
  margin-bottom: 20px;
  // padding: 24px 24px 0;
}

.show {
  .dspflex();
  justify-content: flex-start;
  & > div {
    width: 12%;
  }
  & > div:last-of-type {
    flex-grow: 1;
  }
  .num {
    font-size: 17px;
    font-weight: 600;
    padding-left: 14px;
    margin-bottom: 0;
  }
}

.btn_div {
  margin-bottom: 20px;
}
</style>
